<template>
  <div>
    <h1>侦听器 监听</h1>
    <input type="text" v-model="firstName" />
    <br />
    <input type="text" v-model="lastName" />
    <br />
    <input type="text" v-model="fullName" />
    <button @click="changeName">更改name</button>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      firstName: "a",
      lastName: "b",
      fullName: "a-b",
      obj: {
        name: "付权睿",
        msg: "干啥嘞？？"
      }
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    changeName() {
      this.obj.name = "刘之航";
      console.log(this.obj);
      console.log(this.$watch);
    }
  },

  watch: {
    //   watch侦听器 监视 监视data中的数据，当发生变化，就会触发watch中的回调
    firstName(value) {
      console.log(value);
      this.fullName = value + "-" + this.lastName;
    },
    lastName(value) {
      this.fullName = this.firstName + "-" + value;
    },
    fullName(value) {
      console.log(value);
      const arr = value.split("-");
      this.firstName = arr[0];
      this.lastName = arr[1];
    }
    /* 数据类型：
    基本数据类型：number Boolean undefined string symbol null BigInt 
    引用数据类型： object  array data*/
    /* obj(value) {
      console.log(value);
    } */
    // 对于引用数据类型，需要进行深度监视,深度监视回调函数为handler，deep：true
    /*  obj: {
      handler(value) {
        console.log(value);
      },
      deep: true
    } */
  }
};
</script>
<style lang='' scoped>
</style>